import Carousel from 'react-multi-carousel';
import React from 'react';
import MasretCardMainPage from './MasretCardMainPage';
import { useAppSelector } from '../../redux/hooks';

export default function NewCarusel(): JSX.Element {
  const masters = useAppSelector((store) => store.masters.masters);
  const responsive = {
    superLargeDesktop: {
      // the naming can be any, depends on you.
      breakpoint: { max: 4000, min: 3000 },
      items: 5,
    },
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 3,
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 2,
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 1,
    },
  };
  return (
    <Carousel responsive={responsive}>
      {masters.map((master) => (
          <MasretCardMainPage master={master} />
        ))}
    </Carousel>
  );
}
